<template>
<div class='Index'>
    <Map></Map>
    <!-- 左侧 -->
    <Left id="leftDiv"></Left>
    <div @click="pandeLeft" id="leftButton">{{ intertextleft }}</div>

    <!-- 右侧 -->
    <Right id="rightDiv"></Right>
    <div @click="pandeRight" id="rightButton">{{ intertextright }}</div>
</div>

</template>
<script >
import Vue from 'vue'
import Map from './components/Map'
import Left from './components/Left'
import Right from './components/Right'
export default Vue.extend({
    components:{
        Map,
        Left,
        Right
    },
    data() {
        return {
        drawersright: true,
        intertextright: ">",
        drawersleft: true,
        intertextleft: "<",
        };
    },
  methods: {
      //左侧
    pandeLeft(){
      let leftButton = document.getElementById("leftButton");
      let leftDiv = document.getElementById("leftDiv");
      if (this.drawersleft) {
        this.drawersleft = false;
        this.intertextleft = ">";
        leftButton.innerText = ">";
        leftButton.style.left = "40px";
        leftDiv.style.opacity = 0;
        leftDiv.style.transition = "all 0.5s";
        leftButton.style.transition = "all 0.5s";leftDiv.style.zIndex=-99;
      } else {
        this.intertextleft = "<";
        leftButton.innerText = "<";leftDiv.style.zIndex=99;
        this.drawersleft = true;
        leftDiv.style.opacity = 1;
        leftDiv.style.transition = "all 0.5s";
        leftButton.style.left = "515px";
      }
    },
 
    // 右侧隐藏
    pandeRight() {
      let rightButton = document.getElementById("rightButton");
      let rightDiv = document.getElementById("rightDiv");
      if (this.drawersright) {
            this.drawersright = false;
            this.intertextright = "<";
            rightButton.innerText = "<";
            rightButton.style.right = "40px";
            rightDiv.style.opacity = 0;
            rightDiv.style.transition = "all 0.5s";
            rightButton.style.transition = "all 0.5s";rightDiv.style.zIndex=-99;
      } else {
        this.intertextright = ">";
        rightButton.innerText = ">";rightDiv.style.zIndex=99;
        this.drawersright = true;
        rightDiv.style.opacity = 1;
        rightDiv.style.transition = "all 0.5s";
        rightButton.style.right = "515px";
      }
    },
  
  },
});
</script>
<style>
    .Index {
        position: relative;
        /* position: fixed; */
        flex-flow: wrap;
    }
    #leftDiv{
        position: absolute;
        top:0;
        left:0;
        width: 515px;
        height:100%;
        overflow: hidden;
        background:red;
      
        
    }
    #leftButton{
        position: fixed;
        left: 515px;
        top: 50vh;
        width: 25px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: rgba(0, 0, 0, .7);
        cursor: pointer;
        border-radius: 0px 10px 10px 0px;
        font-size: 20px;
        font-weight: 500;
        color: #999999;
    }
    #rightDiv {
        position: absolute;
        top: 0;
        right: 0px;
        width: 515px;
        height: 100%;
        overflow: hidden;
        background: red;
        border-bottom: solid 1px #ccc;
    }
    #rightButton {
    position: fixed;
    right: 515px;
    top: 50vh;
    width: 25px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: rgba(0, 0, 0, .7);
    cursor: pointer;
    border-radius: 10px 0 0 10px;
    font-size: 20px;
    font-weight: 500;
    color: #999999;
    }



</style>
